<template>
  <div class="liveRoomBox">
    <div class="listBox" v-for="item in lives" :key="item.id">
      <div class="imgBox flex-h" @click="goUrl(item)">
        <img :data-src="item.live_imgae_url" class="left" :src="item.thumbnail" alt="" />
        <div class="right flex1">
          <span class="title">{{ item.title }}</span>
          <span :class="['status', new Date().getTime() > new Date(item.end_time.replace(/-/g, '/')).getTime() ? 'status3' : new Date(item.start_time.replace(/-/g, '/')).getTime() > new Date().getTime() ? 'status2' : 'status1']">{{
            new Date().getTime() > new Date(item.end_time.replace(/-/g, '/')).getTime() ? '直播结束' : new Date(item.start_time.replace(/-/g, '/')).getTime() > new Date().getTime() ? '等待直播' : '直播中'
          }}</span>
          <span class="time">开始时间：{{ item.start_time }}</span>
        </div>
      </div>
      <div class="desc">
        <b>直播导师：{{ item.teacher }}</b
        ><i>{{ item.teacher_introduction }}</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lives: Array
  },
  data() {
    return {}
  },
  computed: {},
  mounted: function() {},
  methods: {
    goUrl(item) {
      if (new Date(item.start_time.replace(/-/g, '/')).getTime() > new Date().getTime()) {
        this.$vux.toast.text('直播尚未开始,请等待')
        return
      }
      if (!item.live_video_url) {
        this.$vux.toast.text('视频正在整理中,请稍后再试')
        return
      }
      window.location.href = item.live_video_url
    }
  }
}
</script>

<style scoped lang="less">
.liveRoomBox {
  padding: 0.3rem;
  box-sizing: border-box;
  .listBox {
    width: 100%;
    height: auto;
    padding: 0.3rem 0;
    border-bottom: 0.01rem solid rgba(229, 229, 229, 1);
    position: relative;
    z-index: 1;
    .clickImg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
      -ms-filter: 'progid: DXImageTransform.Microsoft.Alpha(Opacity=0)';
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .imgBox {
      height: 1.8rem;
      .left {
        width: 3.2rem;
        height: 1.8rem;
      }
      .right {
        padding-left: 0.2rem;
        box-sizing: border-box;
        .title {
          font-size: 0.3rem;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
          display: block;
          line-height: 0.4rem;
          height: 0.8rem;
        }
        .status {
          padding: 0 0.15rem;
          height: 0.4rem;
          line-height: 0.4rem;
          border-radius: 0.2rem;

          border-radius: 0.2rem;
          font-size: 0.24rem;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          margin-top: 0.1rem;
        }
        .status1 {
          background: rgba(242, 63, 63, 1);
        }
        .status2 {
          background: #ffad0d;
        }
        .status3 {
          background: #d2d2d2;
        }
        .time {
          display: block;
          font-size: 0.24rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: rgba(177, 177, 177, 1);
          margin-top: 0.15;
        }
      }
    }
    .desc {
      height: auto;
      margin-top: 0.3rem;
      i,
      b {
        display: initial;
      }
      b {
        font-size: 0.26rem;
        font-weight: 500;
        color: rgba(5, 5, 5, 1);
      }
      i {
        font-size: 0.26rem;
        font-weight: 500;
        color: rgba(99, 99, 99, 1);
        margin-left: 0.2rem;
        line-height: 0.3rem;
      }
    }
  }
}
</style>
